import React, { Component } from 'react'
import { AppWrapper } from './style'
export default class App extends Component {
  state = {
    theme: 'red'
  }
  render() {
    return (
      <AppWrapper theme={this.state.theme}>
        <h1 className="theme"> {this.state.theme}</h1>
        <select onChange={(e) => this.handleSelectColor(e)}>
          <option value="red">red</option>
          <option value="blue">blue</option>
          <option value="green">green</option>
        </select>
        <button className="theme">primary</button>
      </AppWrapper>
    )
  }

  handleSelectColor(e) {
    // console.log(e.target.value)
    // 只是修改了model的值，并不会同步到view
    this.state.theme = e.target.value
    // console.log(this.state.theme)
    // 1. 修改model的值
    // 2. 更新view
    this.setState({
      theme: e.target.value
    })
  }
}

// 1. 设置一个用于选中主题的 下拉按钮

// 2. 选中指定的颜色之后动态修改 主题颜色

// 3. 主题颜色需要把 js中的变量传递到 css中

//   styled-componets

//     props
